<template>
	<div class="body_inner">

		<div class="join_page">
			<div class="page_top">
				<a href="/login"><i class="xi-arrow-left"></i></a>

				<div class="allMenu_btn" v-if="!allMenuShow" @click="allMenuShow = true">
					<div class="x"></div>
					<div class="y"></div>
					<div class="z"></div>
				</div>
				<div class="allMenu_btn open" v-if="allMenuShow" @click="allMenuShow = false">
					<div class="x coll rotate30 rotate45"></div>
					<div class="y coll" style="display: none;"></div>
					<div class="z coll rotate150 rotate135"></div>
				</div>
			</div>

			<div class="page_contents">
				<h3>
					회원가입
					<p>회원 정보를 입력해주세요 :&#41;</p>
				</h3>

				<div class="form_boundary">
					<div>
						<p>아이디(필수)</p>
						<input type="text" v-model="idcard">
					</div>

					<div>
						<p>비밀번호(필수)</p>
						<input type="password" v-model="password">
					</div>

					<div>
						<p>비밀번호 확인(필수)</p>
						<input type="password" v-model="repassword">
					</div>

					<div>
						<p>이름(필수)</p>
						<input type="text" v-model="name">
					</div>

					<div class="tel_box">
						<p>연락처(필수)</p>
						<div>
							<select>
								<option value="">+82(대한민국)</option>
							</select>
							<input type="tel" placeholder="- 없이 입력하세요." v-model="phone">
						</div>
						<!-- <button type="button" class="btn open_modal">인증요청</button> -->
					</div>

					<div>
						<p>이메일(필수)</p>
						<input type="email" v-model="email">
						<div type="button" class="btn open_modal" @click="getCode()">인증요청</div>
					</div>

					<div>
						<p>추천인 ID(필수)</p>
						<input type="text" v-model="refer_id">
					</div>

					<div class="btn" @click="register()">회원가입</div>
				</div>
			</div>
		</div>

		<nav id="allMenu" v-if="allMenuShow">
			<ul>
				<li>
					<a href="/main">
						<p><i class="xi-home"></i>홈</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/staking">
						<p><i class="xi-bank"></i>상품 구매</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/staking_sum">
						<p><i class="xi-credit-card"></i>상품 구매 합계</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/interest">
						<p><i class="xi-piggy-bank"></i>데일리내역</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/withdraw_apply">
						<p><i class="xi-money"></i>출금/송금내역</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/withdraw_list">
						<p><i class="xi-wallet"></i>출금내역</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/recommender">
						<p><i class="xi-group"></i>추천인 목록</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/mypage">
						<p><i class="xi-profile-o"></i>마이페이지</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>
			</ul>

			<!-- <a href="/login" class="btn">로그아웃</a> -->
		</nav>

		<div id="joinModal" class="modal" v-if="showModel">
			<div class="modal_body">
				<div action="" class="form_boundary">
					<section class="sec01">
						<div class="top">
							<img src="../assets/img/icon/message.png" alt="">
							<h3>
								<span>인증번호</span>가 발송되었습니다.
								<p>인증코드를 입력해주세요.</p>
							</h3>
						</div>

						<div class="bottom">
							<p>인증번호 입력</p>
							<input type="number" v-model="yanzhengma">
							<a href="#." class="btn next_btn" @click="showModel=false">인증확인</a>
							<button type="button" class="btn close_btn">닫기</button>
						</div>
					</section>

					<section class="sec02">
						<img src="../assets/img/icon/finish_icon.png" alt="">
						<h3>인증이 완료되었습니다.</h3>
						<button class="btn finish_btn">완료</button>
					</section>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import axios from "axios";
	export default {
		data() {
			return {
				idcard: "",
				password: '',
				repassword: '',
				name: '',
				phone: '',
				email: '',
				refer_id: "",
				yanzhengma: '',
				showModel: false,
				allMenuShow:false
			};
		},
		created() {
			if(this.$route.query.referno){
				this.refer_id = this.$route.query.referno;
			}
		},
		methods: {
			register() {
				var _this = this;
				// if (!_this.idcard || !_this.password || !_this.name || !_this.phone || !_this.email || !_this.refer_id || !
				// 	_this.yanzhengma) {
				// 	alert('전체 정보를 입력하십시오.');
				// 	return;
				// }
				if (!_this.idcard ) {
					alert('아이디 입력하십시오');
					return;
				}
				if (!_this.password ) {
					alert('비밀번호 입력하십시오');
					return;
				}
				if (!_this.repassword ) {
					alert('비밀번호 확인 입력하십시오');
					return;
				}
				if (_this.password != _this.repassword) {
					alert('암호 입력이 두 번 일치하지 않음.');
					return;
				}
				if (!_this.name ) {
					alert('이름 입력하십시오');
					return;
				}
				if (!_this.phone ) {
					alert('연락처 입력하십시오');
					return;
				}
				if (!_this.email ) {
					alert('올바른 메일 주소 입력하십시오.');
					return;
				}
				if (!_this.refer_id ) {
					alert('추천인 ID 입력하십시오');
					return;
				}
				
				axios.post('https://admintest.pdt-daily.com/api/login/register', {
					user_no: _this.idcard,
					password: _this.password,
					real_name: _this.name,
					phone: _this.phone,
					email: _this.email,
					refer_no: _this.refer_id,
					code: _this.yanzhengma
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						alert('데일리 리워드 프로그램 회원가입이 완료되었습니다. 감사합니다.');
						// setTimeout(() => {
							_this.$router.push('/login')
						// },2000);
					}
					if (response.data.status == 600) {
						alert(response.data.message);
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			// 获取邮箱验证码
			getCode() {
				var _that = this;
				if (!_that.email) {
					alert('이메일 입력하십시오.');
					return;
				}
				axios.post('https://admintest.pdt-daily.com/api/login/send_email', {
					email: _that.email
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 400) {
						alert('올바른 메일박스를 입력하십시오.');
					}
					if (response.data.status == 200) {
						_that.showModel = true;
					}
				}).catch(function(error) {
					console.log(error);
				});
			}
		},
	};
</script>